<template>
        <div class="video-banner">
            <video autoplay loop muted   src="/index/video.mp4"></video>
            <div class="discribe title">
                <div>东北大街</div>
                <div>The DongBei Street</div>
            </div>
            <div class="discribe platform-links">
                <div class="link">
                    <img src="/index/test.png" alt="">
                    <div class="platform-code">
                        <img src="/index/test.png" alt="">
                    </div>
                </div>
                <div class="link">
                    <img src="/index/test.png" alt="">
                    <div class="platform-code">
                        二维码
                    </div>
                </div>
                <div class="link">
                    <img src="/index/test.png" alt="">
                </div>
            </div>


        </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted } from 'vue';
  
  onMounted(()=>{
    console.log("HelloWorld");
    
  })
  </script>
  
  <style lang="less" scoped>
      .video-banner{
        width: 100%;
        height: 100vh;
        
        video{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .discribe{
            position: absolute;
        }
        .title{
            left: 5rem;
            bottom: 8rem;
            font-size: 5rem;
            color: white;
        }
        .platform-links{
            left: 50%;
            transform: translateX(-50%);
            bottom: 2rem;
            font-size: 2rem;
            display: flex;
            .link{
                width: 3rem;
                height: 3rem;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                margin: 0 0.5rem 0 0.5rem;
                cursor: pointer;
                .platform-code{
                    position: absolute;
                    bottom: 100%;
                    right: 0;
                    width: 20rem;
                    height: 20rem;
                    background-color: antiquewhite;
                    display: none;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .link:hover  .platform-code{
                display: block;
            }
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
  </style>
  